// useState 让函数组件拥有state功能
// useEffect 相当类组件中的3个生命周期 componentDidMount componentDidUpdate componetWillUnMount
import React, { useState, useEffect } from 'react'


// ui组件 不能使用state 同时它没有生命周期
const App = () => {

  let [count, setCount] = useState(0)
  let [name, setName] = useState('张三')

  // 相当于生命周期
  // 如果没有第2个参数，表示 componentDidMount componentDidUpdate
  // 如果第2个参数为空数组 表示 componentDidMount
  // 如果第2个参数不空数组，只关注所写变量事件更新和挂载 componentDidMount componentDidUpdate

  useEffect(() => {
    if (count > 10) {
      document.title = count
    }
    // 返回回调函数中就是 componetWillUnMount
    return () => {
      // 在此处，就可以把setTimout setInterval  清空
    }
  }, [count]);


  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+++</button>
      <button onClick={() => setName('李四')}>+++</button>
    </div>
  );
}

export default App

/* import React, { Component } from 'react';

class App3 extends Component {

  state = {
    count: 1
  }

  // 只执行一次 挂载完毕
  componentDidMount() {
    document.title = this.state.count
  }

  // state或props有数据有变化则执行它
  componentDidUpdate(){
    document.title = this.state.count
  }



  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState(state => ({ count: state.count + 1 }))}>+++</button>
      </div>
    );
  }
}

export default App3; */


